<!-- src/views/admin/PositionManagement.vue -->
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useAdminStore } from '../../store/admin'
import { ElTable,
  ElTableColumn,
  ElButton,
  ElTag,
  ElMessage,
  ElPagination,
  ElRow,
  ElCol,
  ElCard,
  ElMessageBox } from 'element-plus'

import { useRouter } from 'vue-router'
import PositionDetailDialog from '../../components/PositionDetailDialog.vue'

const adminStore = useAdminStore()
const router = useRouter()

// 状态定义
const positions = ref([])
const loading = ref(false)

// 分页参数
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 岗位详情弹窗相关
const detailDialogVisible = ref(false)
const selectedPositionId = ref(null)

// 获取实习岗位列表
const fetchPositions = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.currentPage - 1,
      size: pagination.pageSize
    }
    const response = await adminStore.fetchInternshipPositions(params)
    positions.value = response.content || []
    pagination.total = response.totalElements || 0
  } catch (error) {
    ElMessage.error('获取实习岗位列表失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 获取岗位状态标签类型
const getPositionStatusType = (status) => {
  switch (status) {
    case 1: return 'success'  // 已发布
    case 0: return 'warning'  // 未发布
    default: return ''
  }
}

// 获取岗位状态标签文本
const getPositionStatusLabel = (status) => {
  switch (status) {
    case 1: return '已发布'
    case 0: return '已下线'  // 修改此处
    default: return '未知'
  }
}

const togglePositionStatus = async (positionId, currentStatus) => {
  try {
    await ElMessageBox.confirm(
        `确定要${currentStatus === 1 ? '下线' : '上线'}此实习岗位吗？`,
        '确认操作',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    )

    await adminStore.togglePositionStatus(positionId)
    ElMessage.success(`${currentStatus === 1 ? '下线' : '上线'}成功`)
    fetchPositions() // 重新加载数据
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || `${currentStatus === 1 ? '下线' : '上线'}失败`)
    }
  }
}
// 获取工作类型标签
const getWorkTypeLabel = (workType) => {
  switch (workType) {
    case 0: return '全职'
    case 1: return '兼职'
    case 2: return '实习'
    case 3: return '远程'
    default: return '未知'
  }
}

// 分页事件处理
const handleSizeChange = (val) => {
  pagination.pageSize = val
  pagination.currentPage = 1
  fetchPositions()
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  fetchPositions()
}

// 查看岗位详情
const viewPositionDetail = (positionId) => {
  selectedPositionId.value = positionId
  detailDialogVisible.value = true
}

// 初始化加载
onMounted(() => {
  fetchPositions()
})
</script>

<template>
  <div class="position-management">
    <div class="header">
      <h2>实习岗位管理</h2>
      <el-button @click="$router.back()" style="margin-left: auto;">返回上级</el-button>
    </div>

    <!-- 实习岗位列表 -->
    <el-table
        :data="positions"
        v-loading="loading"
        style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="title" label="岗位标题" min-width="150" />
      <el-table-column prop="companyName" label="企业名称" min-width="120" />
      <el-table-column prop="department" label="部门" width="100" />
      <el-table-column prop="workLocation" label="工作地点" width="100" />
      <el-table-column prop="salaryRange" label="薪资范围" width="120" />
      <el-table-column prop="workType" label="工作类型" width="100">
        <template #default="scope">
          {{ getWorkTypeLabel(scope.row.workType) }}
        </template>
      </el-table-column>
      <el-table-column prop="recruitmentCount" label="招聘人数" width="100" />
      <el-table-column prop="deadline" label="截止日期" width="120">
        <template #default="scope">
          {{ scope.row.deadline ? new Date(scope.row.deadline).toLocaleDateString() : '' }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getPositionStatusType(scope.row.status)">
            {{ getPositionStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="viewPositionDetail(scope.row.id)">
            查看详情
          </el-button>
          <el-button
              size="small"
              :type="scope.row.status === 1 ? 'danger' : 'primary'"
              @click="togglePositionStatus(scope.row.id, scope.row.status)"            style="margin-left: 5px"
          >
            {{ scope.row.status === 1 ? '下线' : '上线' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px; justify-content: center;"
    />

    <!-- 岗位详情弹窗 (使用公共组件) -->
    <PositionDetailDialog
      v-model:visible="detailDialogVisible"
      :position-id="selectedPositionId"
    />
  </div>
</template>

<style scoped>
.position-management {
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>
